<template>
	<view class="root-massage" @click="goXiangqing">
		<view class="root-top">
			<view class="root-top-left">
				<img src="../../../static/image/Square/tou.jpg" alt="">
				<h4>{{huati.name}}</h4>
			</view>
			<span class="root-top-time">发布时间{{huati.time}}</span>
		</view>
		<view class="root-center">
			<img src="../../../static/image/Square/banner1.jpg" alt="">
			<h3>
				余光中先生说:“月色与雪色之间,你是第主种绝色。”
				余光中先生说:“月色与雪色之间,你是第主种绝色。”
				余光中先生说:“月色与雪色之间,你是第主种绝色。”
			</h3>
		</view>
		<view class="root-bottom">
			<view class="bottom-item">
				<u-icon name="thumb-up" color="#ccc" size="18"></u-icon>
				<p>{{huati.dz}}</p>
			</view>
			<view class="bottom-item">
				<u-icon name="eye" color="#ccc" size="18"></u-icon>
				<p>{{huati.sc}}</p>
			</view>
			<view class="bottom-item">
				<u-icon name="more-circle" color="#ccc" size="18"></u-icon>
				<p>{{huati.gz}}</p>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:["huati"],
		data(){
			return{}
		},
		methods:{
			goXiangqing(){
				uni.navigateTo({
					url:`/pages/Square/pages/Htxiangqing?
					name=${this.huati.name}
					&time=${this.huati.time}
					&dz=${this.huati.dz}
					&sc=${this.huati.sc}
					&gz=${this.huati.gz}
					`,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.root-massage{
	margin: 30upx auto;
	width: 94%;
	height: 520upx;
	border-radius: 20upx;
	border: 1upx solid #cccccc;
	.root-top{
		height: 100upx;
		position: relative;
		.root-top-left{
			width: 350upx;
			height: 100upx;
			float: left;
			img{
				height: 80%;
				margin-top: 10upx;
				margin-left: 20upx;
				float: left;
			}
			h4{
				float: left;
				font-size: 12upx;
				margin-left: 10upx;
				line-height: 100upx;
			}
		}
		.root-top-time{
			position: absolute;
			top: 30upx;
			right: 20upx;
			font-size: 16upx;
			color: #cccccc;
		}
	}
	.root-center{
		width: 90%;
		height: 360upx;
		margin: 0 auto; 
		border-bottom: 1upx solid #ccc;
		img{
			width: 100%;
			height: 300upx;
		}
		h3{
			height: 60upx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			line-height: 40upx;
			font-size: 28upx;
			font-weight: 600;
		}
	}
	.root-bottom{
		height: 60upx;
		display: flex;
		justify-content: space-around;
		.bottom-item{
			margin: 10upx 5upx 0 5upx;
			width: 90upx;
			height: 40upx;
			position: relative;
			p{
				font-size: 18upx;
				color: #ccc;
				position: absolute;
				top: 0;
				right: 0;
			}
		}
	}
}
</style>